// main-app/src/App.vue
<template>
  <div class="main-container">
    <h1>欢迎来到主应用 (Host) </h1>

    <div style="margin: 12px 0;">下面 使用 远程组件、远程页面、远程工具函数</div>

    <router-link to="/">
      <button>跳转到首页</button>
    </router-link>

    <span style="margin: 0 24px;"></span>
  
    <router-link to="/shared">
      <button>跳转至子应用共享的页面</button>
    </router-link>

    <div class="line"></div>
    <router-view v-slot="{ Component }">
      <Suspense>
        <template #default>
          <component :is="Component" />
        </template>
        <template #fallback>
          <div>Loading remote page...</div>
        </template>
      </Suspense>
    </router-view>
  </div>
</template>

<script setup>

</script>

<style>
.main-container {
  text-align: center;
  margin-top: 60px;
}
.line{
  border-bottom: 1px solid #eee;
  margin: 24px 0;
}
</style>
